<style scoped>
.modibutton {
  background-color: #2b85e4;
  color: white;
  border-color: #2b85e4;
}
</style>


<template>
  <div>
    <Button
      style="float: left; margin-right: 8px"
      icon="ios-add"
      type="primary"
      shape="circle"
      @click="modal1 = true"
    >添加专业课程</Button>
    <br />
    <br />
    <br />
    <Modal
      v-model="modal1"
      title="录入专业基本信息"
      width="700"
      scrollable
      @on-ok="addMajorCourse(majorcourse)"
    >
      <div>
        <majorcourseinfo
          :majorId="majorId"
          :key="new Date().getTime()"
          @getMajorCourse="getMajorCourse"
        ></majorcourseinfo>
      </div>
    </Modal>

    <Table border :columns="columnshead" :data="datat">
      <!-- 修改项 -->
      <!-- csProperties -->
      <template slot-scope="{ row, index }" slot="csProperties">
        <Select
          v-model="modifymajorcourse.csProperties"
          filterable
          v-if="editIndex === index"
          transfer
        >
          <Option value="公共基础">公共基础</Option>
          <Option value="专业核心">专业核心</Option>
          <Option value="专业选考">专业选考</Option>
        </Select>
        <span v-else>{{ row.csProperties }}</span>
      </template>
      <!-- mcType -->
      <template slot-scope="{ row, index }" slot="mcType">
        <Select v-model="modifymajorcourse.mcType" filterable v-if="editIndex === index" transfer>
          <Option value="必考">必考</Option>
          <Option value="选考">选考</Option>
        </Select>
        <span v-else>{{ row.mcType }}</span>
      </template>
      <!-- mcAssmethod -->
      <template slot-scope="{ row, index }" slot="mcAssmethod">
        <Select
          v-model="modifymajorcourse.mcAssmethod"
          filterable
          v-if="editIndex === index"
          transfer
        >
          <Option value="笔试">笔试</Option>
          <Option value="非笔试">非笔试</Option>
          <Option value="机考">机考</Option>
        </Select>
        <span v-else>{{ row.mcAssmethod }}</span>
      </template>
      <!-- examType -->
      <template slot-scope="{ row, index }" slot="examType">
        <Select v-model="modifymajorcourse.examType" filterable v-if="editIndex === index" transfer>
          <Option value="统考">统考</Option>
          <Option value="省考">省考</Option>
        </Select>
        <span v-else>{{ row.examType }}</span>
      </template>
      <!-- mcRemark -->
      <template slot-scope="{ row, index }" slot="mcRemark">
        <Input type="text" v-model="modifymajorcourse.mcRemark" v-if="editIndex === index" />
        <span v-else>{{ row.mcRemark }}</span>
      </template>
      <!-- mrId -->
      <template slot-scope="{ row, index }" slot="mrId">
        <Select v-model="modifymajorcourse.mrId" filterable v-if="editIndex === index" transfer>
          <Option v-for="item in mrIdList" :value="item.mrId" :key="item.mrId" :label="item.mrId">
            <span>{{item.mrId}}</span>
            <span style="float:right;color:#808695">{{item.oriName}}</span>
          </Option>
        </Select>
        <span v-else>{{ row.mrId }}</span>
      </template>
      <!-- 修改按钮 -->
      <template slot-scope="{ row, index }" slot="action">
        <div v-if="editIndex === index">
          <Button @click="handleSave(row,index)" size="small" class="modibutton">保存</Button>
          <Button @click="editIndex = -1" size="small" class="modibutton">取消</Button>
        </div>
        <div v-else>
          <Button @click="modimjcourse(row, index)" size="small" class="modibutton">修改</Button>
          <Button @click="delmjcourse(row, index)" size="small" type="error">删除</Button>
        </div>
      </template>
    </Table>

    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="total" :current="1" show-elevator show-total @on-change="changePage"></Page>
      </div>
    </div>
  </div>
</template>

<script>
import majorcourseinfo from "./MajorCourseInfo.vue";
export default {
  props: ["majorId", "mvId"],
  components: { majorcourseinfo },
  data() {
    return {
      columnshead: [
        {
          type: "index",
          title: "序号",
          width: 60
        },
        {
          title: "课程编码",
          key: "csId",
          width: 150
        },
        {
          title: "课程名称",
          key: "csName",
          width: 150
        },
        {
          title: "课程性质",
          slot: "csProperties",
          width: 150,
          filters: [
            {
              label: "公共基础",
              value: 1
            },
            {
              label: "专业核心",
              value: 2
            },
            {
              label: "专业选考",
              value: 3
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 1) {
              return row.csProperties == "公共基础";
            } else if (value === 2) {
              return row.csProperties == "专业核心";
            } else {
              return row.csProperties == "专业选考";
            }
          }
        },
        {
          title: "课程类别",
          slot: "mcType",
          width: 150
        },
        {
          title: "考核方式",
          slot: "mcAssmethod",
          width: 150
        },
        {
          title: "考试类型",
          slot: "examType",
          width: 150
        },
        {
          title: "所属方向",
          slot: "mrId",
          width: 180
        },
        {
          title: "备注",
          slot: "mcRemark",
          width: 150
        },
        {
          title: "操作",
          slot: "action",
          width: 130,
          fixed: "right",
          align: "center"
        }
      ],
      datat: [],
      total: 1,
      current: 1,
      editIndex: -1,
      modal1: false,
      majorcourse: {},
      modifymajorcourse: {},
      mrIdList: []
    };
  },
  created() {
    this.$axios
      .get(
        this.$host +
          "/Majorcourse/allmajorcourseByMajor?mjId=" +
          this.majorId +
          "&&pageNum=1&&pageSize=10"
      )
      .then(res => {
        this.datat = res.data.data.list;
        this.total = res.data.data.total;
      });
    this.$axios
      .get(
        this.$host +
          "/MajorOrientation/majorOrientationByMajor?mjId=" +
          this.majorId
      )
      .then(res => {
        this.mrIdList = res.data.data;
      });
  },

  methods: {
    changePage(currentPage) {
      this.$axios
        .get(
          this.$host +
            "/Majorcourse/allmajorcourseByMajor?mjId=" +
            this.majorId +
            "&&pageNum=" +
            currentPage +
            "&&pageSize=10"
        )
        .then(res => {
          this.datat = res.data.data.list;
          this.current = currentPage;
        });
    },
    getMajorCourse(majorcourse) {
      this.majorcourse = majorcourse;
    },
    addMajorCourse(majorcourse) {
      majorcourse.mvId = this.mvId;
      majorcourse.mjId = this.majorId;
      majorcourse.mcId = Math.ceil(Math.random() * 10);
      this.$axios
        .post(this.$host + "/Majorcourse/majorcourse", majorcourse)
        .then(res => {
          if ((res.data.message = "新增成功")) {
            this.$Message.success("添加专业课程成功");
            this.$axios
              .get(
                this.$host +
                  "/Majorcourse/allmajorcourseByMajor?mjId=" +
                  this.majorId +
                  "&&pageNum=" +
                  this.current +
                  "&&pageSize=10"
              )
              .then(res => {
                this.datat = res.data.data.list;
              });
          } else this.$Message.error("添加专业课程失败");
        });
    },
    modimjcourse(row, index) {
      this.modifymajorcourse = row;
      this.editIndex = index;
    },
    handleSave(row, index) {
      row = this.modifymajorcourse;
      this.modifymajorcourse = JSON.parse(JSON.stringify(row));
      this.$delete(this.modifymajorcourse, "_index");
      this.$delete(this.modifymajorcourse, "_rowKey");
      this.$delete(this.modifymajorcourse, "csName");
      this.$axios
        .put(this.$host + "/Majorcourse/majorcourse", this.modifymajorcourse)
        .then(res => {
          if ((res.data.message = "修改成功"))
            this.$Message.success("修改专业课程成功");
          else this.$Message.error("修改专业课程失败");
        });
      this.editIndex = -1;
    },
    delmjcourse(row, index) {
      this.datat.splice(index, 1);
      this.$axios
        .delete(this.$host + "/Majorcourse/majorcourse", {
          params: { mcId: row.mcId }
        })
        .then(res => {
          if ((res.data.message = "删除成功"))
            this.$Message.success("删除成功");
          else this.$Message.error("删除失败");
        });
    }
  }
};
</script>